<template>
	<view class="pop-box-container">
		<view class="popup-content">
			<view class="popup-content-title">
				<view v-if="title != ''" class="popup-content-title-tt">{{title}}
					<view class="close-text" @tap.stop="close()">
						<uni-icons type="closeempty"></uni-icons>
					</view>
				</view>
				<view v-if="tip != ''" class="popup-content-title-tip">注：{{tip}}</view>
			</view>
			<slot name="body">
				<view class="popup-content-body">
					<!-- <scroll-view class="scroll-box" scroll-y="true"> -->
					<!-- <block v-if="orderList && orderList.length >0">
							<view class="popup-content-body-item order-list-box" style="border-bottom: 1px solid #eee;">
								<view class="popup-content-body-item-child font-24">
									订单1
								</view>
								<view class="popup-content-body-item-child font-28 order-leb">
									<view>外卖订单号</view>
									<view>12345676867654</view>
								</view>
								<view class="popup-content-body-item-child font-28 order-leb">
									<view>报名时间</view>
									<view>12345676867654</view>
								</view>
								<view class="popup-content-body-item-child font-28 order-leb">
									<view>活动图片</view>
									<view class="oder-img-list">
										<image mode="aspectFill" src="../../static/images/avatar.png"></image>
										<image mode="aspectFill" src="../../static/images/avatar.png"></image>
										<image mode="aspectFill" src="../../static/images/avatar.png"></image>
									</view>
								</view>
							</view>
						</block> -->
					<view v-for="(item,index) in body" :key="index" class="popup-content-body-item"
						:style="index == 0 ? 'border-bottom: 1px solid #eee;':''">
						<view class="popup-content-body-item-child font-24">
							{{item.title}}
						</view>
						<view v-if="item.child && item.child.length > 0" class="popup-content-body-item-child font-28">
							<view v-for="(child,i) in item.child" :key="i">{{child}}</view>
						</view>
						<view v-if="item.child2 && item.child2.length > 0"
							class="popup-content-body-item-child font-28">
							<view v-for="(child,i2) in item.child2" :key="i2">{{child}}</view>
						</view>
						<view v-if="item.child3 && item.child3.length > 0"
							class="popup-content-body-item-child font-28">
							<view v-for="(child,i3) in item.child3" :key="i3">{{child}}</view>
						</view>
					</view>
					<!-- </scroll-view> -->
				</view>
			</slot>
			<view class="popup-content-footer">
				<view v-if="showCance" class="popup-content-footer-item popup-content-footer-cance" @tap.stop="cance()">
					{{canceText}}
				</view>
				<view v-if=" showConfirm" class="popup-content-footer-item popup-content-footer-confirm"
					@tap.stop="confirm()">{{confirmText}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "t-pop",
		data() {
			return {
				requestIng: false
			};
		},
		props: {
			data: {
				type: Object,
				default: null
			},
			title: {
				type: String,
				default: ''
			},
			tip: {
				type: String,
				default: ''
			},
			body: {
				type: Array,
				default: () => {
					return [
						/* {
							title: 'title',
							child: ['child', 'child']
						},
						{
							title: 'title',
							child: ['child', 'child']
						}, */
					]
				}
			},
			showCance: {
				type: Boolean,
				default: true
			},
			showConfirm: {
				type: Boolean,
				default: true
			},
			canceText: {
				type: String,
				default: '取消'
			},
			confirmText: {
				type: String,
				default: '确认发布'
			},
			extend: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		methods: {
			confirm() {
				console.log('confirm')
				this.$emit('confirm',this.extend)
			},
			cance() {
				console.log('cance')
				this.$emit('cance')
			},
			close() {
				console.log('close')
				this.$emit('close')
			},

		}
	}
</script>

<style lang="scss">
	.pop-flex-s {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pop-flex-c {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* .uni-popup__wrapper {
		border-radius: 10px;
	} */


	.popup-content {
		@extend .pop-flex-c;
		width: 90vw;
		border-radius: 50px;

		// padding: 20rpx 2vw;
		.popup-content-title,
		.popup-content-body {
			padding: 0 30rpx;
		}

		.popup-content-title {
			@extend .pop-flex-c;
			margin: 20rpx 0;

			.popup-content-title-tt {
				display: flex;
				justify-content: center;
				font-size: 40rpx;
				font-weight: 700;
				color: #222;
				position: relative;

				.close-text {
					position: absolute;
					top: -18rpx;
					right: -20rpx;
					width: 50rpx;
					height: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.popup-content-title-tip {
				color: #ff9000;
				font-size: 20rpx;
				margin-top: 20rpx;
			}
		}

		.popup-content-body {
			@extend .pop-flex-c;
			margin: 20rpx 0 30rpx;

			.popup-content-body-item {
				@extend .pop-flex-c;

				.popup-content-body-item-child {
					@extend .pop-flex-s;
					height: 60rpx;
				}
			}
		}

		.popup-content-footer {
			@extend .pop-flex-s;
			border-top: 1px solid #ff9000;
			height: 80rpx;

			.popup-content-footer-item {
				@extend .pop-flex-s;
				justify-content: center;
				flex: 1;
				height: 100%;
			}

			.popup-content-footer-cance {}

			.popup-content-footer-confirm {
				background: #ff9000;
				color: #fff;
				border-radius: 0 0 10px 0;
			}
		}
	}

	.font-24 {
		font-size: 24rpx;
		color: #666;
	}

	.font-28 {
		font-size: 28rpx;
		color: #222;
		font-weight: 600;
	}

	.scroll-box {
		height: 300rpx;

		// background: red;
		.order-leb {
			justify-content: flex-start !important;
		}
	}
</style>
